<!-- 查询用电查询 -->
<template>
	<el-drawer direction="rtl" v-model="dialogVisible" :title="dialogTitle" size="90%">
		<ContentWrap>
			<!-- 搜索工作栏 -->
			<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
				<el-form-item label="时间区间" v-if="factoryCodes != 2">
					<el-date-picker v-model="queryParams.dateScope" type="daterange" value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
				</el-form-item>
				<el-form-item label="时间区间" v-else>
					<el-date-picker v-model="queryParams.dateScope" type="month" value-format="YYYY-MM" placeholder="开始日期" />
				</el-form-item>
				<el-form-item>
					<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
				</el-form-item>
			</el-form>
		</ContentWrap>

		<!-- 列表 -->
		<ContentWrap>
			<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
				<el-table-column label="日期" align="center" prop="day" width="120" />
				<el-table-column label="起始度数" align="center" prop="startValue" />
				<el-table-column label="结束度数" align="center" prop="endValue" />
				<el-table-column label="使用度数" align="center" prop="usedValue" />
			</el-table>
		</ContentWrap>
	</el-drawer>
</template>
<script lang="ts" setup>
	import { getMeterUsePowers } from '@/api/zwsj/meter'

	defineOptions({ name: 'FactoryPowerUseQuery' })

	const dialogVisible = ref(false) // 弹窗的是否展示
	const dialogTitle = ref('') // 弹窗的标题
	const loading = ref(true) // 列表的加载中
	const list = ref() // 列表的数据

	const queryParams = reactive({
		dateScope: undefined,
	})

	/** 打开弹窗 */
	const meterIdRef = ref<number>() // 搜索的表单
	const factoryCodes = ref<number | string>('') // 厂家编码
	const open = async (meterId: number, factoryCode: number | string) => {
		queryParams.dateScope = undefined
		list.value = []
		loading.value = false

		dialogVisible.value = true
		dialogTitle.value = '厂家电表系统-用电查询'
		meterIdRef.value = meterId
		factoryCodes.value = factoryCode
		handleQuery()
	}
	defineExpose({ open }) // 提供 open 方法，用于打开弹窗

	const queryFormRef = ref() // 搜索的表单

	/** 查询部门列表 */
	const getList = async () => {
		let dateScope = ''
		if (factoryCodes.value != 2) {
			let tmp: string[] = queryParams.dateScope || []
			if (tmp.length != 2) {
				return
			}
			loading.value = true
			dateScope = tmp[0] + ' - ' + tmp[1]
		} else {
			if (!queryParams.dateScope) {
				return
			}
			dateScope = queryParams.dateScope
		}
		const data = await getMeterUsePowers(meterIdRef.value, dateScope)
		list.value = data.msg
		loading.value = false
	}

	/** 搜索按钮操作 */
	const handleQuery = () => {
		getList()
	}
</script>
